<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="headerCMDB">
    <img class="logo_imgCMDB" alt="" src="../../static/img/logo.gif">
    <span class="wel_wordCMDB">CMDB</span>
    <div class="headerMenu">
        欢迎,<a href="pages/user/login.jsp">admin</a>
        <a href="pages/user/regist.jsp">退 出</a> &nbsp;&nbsp;
    </div>
</div>
<div class="zoumadeng">
    走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!!
    走马灯!! 走马灯!! 走马灯!! 走马灯!! 走马灯!!
</div>
<div class="main">
    <div class="cebianlan">
        <a href="#" class="list-group-item active">服务器</a>
        <a href="/index.php?r=home/index" class="list-group-item">服务器列表</a>
        <a href="/index.php?r=home/addfile" class="list-group-item">服务器增加</a>
        <a href="/index.php?r=home/download" class="list-group-item">服务器报告</a>
        <a href="#" class="list-group-item active">项目管理</a>
        <a href="/index.php?r=home/project" class="list-group-item">项目列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">项目增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">获取报告</a>
        <a href="#" class="list-group-item active">基础服务</a>
        <a href="/index.php?r=home/project" class="list-group-item">服务列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">服务增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">服务报告</a>
        <a href="#" class="list-group-item active">容器</a>
        <a href="/index.php?r=home/project" class="list-group-item">容器列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">容器增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">容器报告</a>
        <a href="#" class="list-group-item active">用户</a>
        <a href="/index.php?r=home/project" class="list-group-item">用户列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">用户增加</a>
        <a href="/index.php?r=home/getward" class="list-group-item">用户报告</a>
        <a href="#" class="list-group-item active">系统功能</a>
        <a href="/index.php?r=home/project" class="list-group-item">功能列表</a>
        <a href="/index.php?r=home/addproject" class="list-group-item">功能建议</a>
        <a href="/index.php?r=home/getward" class="list-group-item">功能报告</a>
    </div>
    <div class="work" id="work" style="height: 538px">
        <div class="workHead">
            <div class="workHeadDescribe">服务器 / 服务器列表</div>
        </div>
        <div class="workMain" >
            <form action="#" class="serviceComputerForm">
                主机名: <input type="text" name="name" class="serviceComputerName"><br><br>
                ip: <input type="text" name="ip" class="serviceComputerIp"><br><br>
                <span>备注:</span> <textarea name="note" id="" cols="33" rows="10" class="serviceComputerNote"></textarea><br><br>
                <input type="button" value="提交" class="serviceComputerButton">
            </form>
        </div>
    </div>
</div>


<!--<%&#45;&#45;<jsp:include page="../common/cebianlan.jsp"></jsp:include>&#45;&#45;%>-->
<!--<%&#45;&#45;<div id="box">&#45;&#45;%>-->
<!--<%&#45;&#45;    <div id="start" class="target" >start</div>&#45;&#45;%>-->
<!--<%&#45;&#45;    <div id="end" class="target">end</div>&#45;&#45;%>-->
<!--<%&#45;&#45;    <div id="start2" class="target" >start2</div>&#45;&#45;%>-->
<!--<%&#45;&#45;    <div id="end2" class="target">end2</div>&#45;&#45;%>-->
<!--<%&#45;&#45;</div>&#45;&#45;%>-->
<!--<%&#45;&#45;<jsp:include page="../common/cebianlan.jsp"></jsp:include>&#45;&#45;%>-->
<!--<script>-->

<!--    var startEle = document.getElementById('start');-->
<!--    var endEle = document.getElementById('end');-->

<!--    var startEle2 = document.getElementById('start2');-->
<!--    var endEle2 = document.getElementById('end2');-->

<!--    startEle.style.position="absolute"-->
<!--    endEle.style.position="absolute"-->
<!--    endEle.style.top=getTop(startEle)+startEle.clientHeight+2+"px"-->
<!--    endEle.style.left=getLeft(startEle)+180+"px"-->

<!--    startEle2.style.position="absolute"-->
<!--    startEle2.style.left=startEle.style.left-->
<!--    startEle2.style.top=endEle.style.top-->

<!--    endEle2.style.position="absolute"-->
<!--    endEle2.style.left=endEle.style.left-->
<!--    endEle2.style.top=startEle.style.top-->

<!--    let leader_line=f(startEle,endEle,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");-->

<!--    const leader_line2 = f(startEle2, endEle2, kaishiyanse = '#ff3792', jieshuyanse = '#fff386', yanshi = "shixian");-->

<!--    let leader_line3=f(startEle,endEle2,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");-->

<!--    let boxObj=document.getElementById("box")-->
<!--    boxObj.onmouseover=function (event) {//这个this是事件触发的元素-->
<!--        if(event.target.classList.contains('target')){-->
<!--            let add=document.createElement("div")-->
<!--            add.style.position="absolute" //relative absolute-->
<!--            add.style.left=event.target.offsetLeft+event.target.offsetWidth+"px"-->
<!--            add.style.top=event.target.offsetTop+event.target.offsetHeight-30+"px"-->
<!--            add.style.width=50+"px"-->
<!--            add.style.height=30+"px"-->
<!--            add.style.background="green"-->
<!--            add.id=event.target.id+"AddId"-->
<!--            add.innerHTML="create"-->

<!--            boxObj.append(add)-->
<!--        }-->
<!--    }-->
<!--    boxObj.onmouseout=function(event) {//这个this是事件触发的元素-->
<!--        if(event.target.classList.contains('target')){-->
<!--            var addEle = document.getElementById(event.target.id + "AddId");-->
<!--            var x = event.clientX;-->
<!--            var y = event.clientY;-->
<!--            var divx1 = addEle.offsetLeft;  //距离边界的距离-->
<!--            var divy1 = addEle.offsetTop; //距离边界的距离-->
<!--            var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离-->
<!--            var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离-->
<!--            if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {-->
<!--                //鼠标小于左上点横方向-->
<!--                //鼠标大于右下点横方向-->
<!--                //鼠标小于左上点竖方向-->
<!--                //鼠标大于右下点竖方向-->
<!--                //此时鼠标不在这个模块中-->
<!--                //那就可以删除了-->
<!--                boxObj.removeChild(addEle)-->
<!--            } else {-->
<!--                //否则,鼠标在这个addEle模块中-->
<!--                //那就不删除-->

<!--                addEle.onclick = function (event) {-->
<!--                    let newDiv = document.createElement("div")-->
<!--                    //获取当前对象的位置-->
<!--                    var addDivX = this.offsetLeft-->
<!--                    var addDivY = this.offsetTop-->
<!--                    newDiv.style.position = "absolute"-->
<!--                    newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"-->
<!--                    newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"-->
<!--                    newDiv.style.width = 50 + "px"-->
<!--                    newDiv.style.height = 30 + "px"-->
<!--                    newDiv.style.background = "#00FF00"-->
<!--                    newDiv.id = this.id.replace("AddId", "") + "NewDiv"-->
<!--                    newDiv.className="target"-->

<!--                    boxObj.append(newDiv)-->
<!--                    let newDivLeadLine=f(document.getElementById(this.id.replace("AddId", "")),newDiv,kaishiyanse='#ff3792',jieshuyanse='#fff386',yanshi="xuxian");-->
<!--                }-->
<!--                addEle.onmouseout = function (event) {-->
<!--                    event.cancelBubble=true;//事件取消冒泡-->
<!--                    boxObj.removeChild(event.target)-->
<!--                    // this.id.replace("AddId", "")-->
<!--                    // let divObj = document.getElementById(this.id.replace("AddId", ""));-->
<!--                    // console.log(divObj)-->
<!--                    // let x = event.clientX;-->
<!--                    // let y = event.clientY;-->
<!--                    // let divx1 = divObj.offsetLeft;  //距离边界的距离-->
<!--                    // let divy1 = divObj.offsetTop; //距离边界的距离-->
<!--                    // let divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离-->
<!--                    // let divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离-->
<!--                    // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {-->
<!--                    //     //移出了divObj,删除add模块-->
<!--                    //     boxObj.removeChild(this)-->
<!--                    // } else {//这说明,鼠标虽然移出了addDiv,但是马上进入了divObj区域内.说简单点就是,鼠标又回去了-->
<!--                    //     //没移出divObj,不删除-->
<!--                    // }-->
<!--                }-->
<!--            }-->
<!--        }-->
<!--        // var addEle = document.getElementById(event.target.id + "AddId");-->
<!--        // var x = event.clientX;-->
<!--        // var y = event.clientY;-->
<!--        // var divx1 = addEle.offsetLeft;  //距离边界的距离-->
<!--        // var divy1 = addEle.offsetTop; //距离边界的距离-->
<!--        // var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离-->
<!--        // var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离-->
<!--        // if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {-->
<!--        //     //鼠标小于左上点横方向-->
<!--        //     //鼠标大于右下点横方向-->
<!--        //     //鼠标小于左上点竖方向-->
<!--        //     //鼠标大于右下点竖方向-->
<!--        //     //此时鼠标不在这个模块中-->
<!--        //     //那就可以删除了-->
<!--        //     boxObj.removeChild(addEle)-->
<!--        //  } else {-->
<!--        // //     //否则,鼠标在这个模块中-->
<!--        // //     //那就不删除-->
<!--        // //     addEle.onclick = function (event) {-->
<!--        // //         let newDiv = document.createElement("div")-->
<!--        // //         //获取当前对象的位置-->
<!--        // //         var addDivX = this.offsetLeft-->
<!--        // //         var addDivY = this.offsetTop-->
<!--        // //         newDiv.style.position = "absolute"-->
<!--        // //         newDiv.style.left = this.offsetLeft + this.offsetWidth + "px"-->
<!--        // //         newDiv.style.top = this.offsetTop + this.offsetHeight + 30 + "px"-->
<!--        // //         newDiv.style.width = 50 + "px"-->
<!--        // //         newDiv.style.height = 30 + "px"-->
<!--        // //         newDiv.style.background = "#00FF00"-->
<!--        // //         newDiv.id = this.id.replace("AddId", "") + "NewDiv"-->
<!--        // //         document.body.append(newDiv)-->
<!--        // //     }-->
<!--        // //     addEle.onmouseout = function (event) {-->
<!--        // //         this.id.replace("AddId", "")-->
<!--        // //         var divObj = document.getElementById(this.id.replace("AddId", ""));-->
<!--        // //         var x = event.clientX;-->
<!--        // //         var y = event.clientY;-->
<!--        // //         var divx1 = divObj.offsetLeft;  //距离边界的距离-->
<!--        // //         var divy1 = divObj.offsetTop; //距离边界的距离-->
<!--        // //         var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离-->
<!--        // //         var divy2 = divObj.offsetTop + divObj.offsetHeight; //右下点距离边界的距离-->
<!--        // //         if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {-->
<!--        // //             //移出了divObj,删除add模块-->
<!--        // //             document.body.removeChild(this)-->
<!--        // //         } else {-->
<!--        // //             //没移出divObj,不删除-->
<!--        // //         }-->
<!--        // //     }-->
<!--        // }-->
<!--    }-->


<!--    // objs=document.getElementsByClassName("target")-->
<!--    // for(var i in objs){-->
<!--    //     //为每个div添加了add模块-->
<!--    //     objs[i].onmouseover = function (){-->
<!--    //         let add=document.createElement("div")-->
<!--    //         add.style.position="absolute" //relative absolute-->
<!--    //         add.style.left=this.offsetLeft+this.offsetWidth+"px"-->
<!--    //         add.style.top=this.offsetTop+this.offsetHeight-30+"px"-->
<!--    //         add.style.width=50+"px"-->
<!--    //         add.style.height=30+"px"-->
<!--    //         add.style.background="green"-->
<!--    //         add.id=this.id+"AddId"-->
<!--    //         add.innerHTML="create"-->
<!--    //-->
<!--    //         document.body.append(add)-->
<!--    //-->
<!--    //         // console.log("add图标的横坐标:"+add.style.left,"add图标的纵坐标:"+add.style.top)-->
<!--    //         // console.log("大div的左上角坐标为:"+this.offsetLeft,this.offsetTop)-->
<!--    //         // console.log("大div的宽度和高度是:"+this.offsetWidth,this.offsetHeight)-->
<!--    //         // console.log("大div的右下角坐标为:"+(this.offsetLeft+this.offsetWidth),(this.offsetTop+this.offsetHeight))-->
<!--    //         // console.log("小div的左上角坐标为:"+(this.offsetLeft+this.offsetWidth-10),(this.offsetTop+this.offsetHeight-10))-->
<!--    //     }-->
<!--    //     //当鼠标移出div模块时,add模块也随之消失;这里面有矛盾!-->
<!--    //     //当鼠标移出div时,进入add模块后,add模块不应该消失-->
<!--    //     //当鼠标移出div,并没有进入add模块时,add模块应该消失-->
<!--    //         //关键点在于判断,移出div时,是否进入add模块-->
<!--    //     objs[i].onmouseout=function(event){-->
<!--    //         var addEle = document.getElementById(this.id+"AddId");-->
<!--    //         var x=event.clientX;-->
<!--    //         var y=event.clientY;-->
<!--    //         var divx1 = addEle.offsetLeft;  //距离边界的距离-->
<!--    //         var divy1 = addEle.offsetTop; //距离边界的距离-->
<!--    //         var divx2 = addEle.offsetLeft + addEle.offsetWidth; //右下点距离边界的距离-->
<!--    //         var divy2 = addEle.offsetTop + addEle.offsetHeight; //右下点距离边界的距离-->
<!--    //         if( x < divx1 || x > divx2 || y < divy1 || y > divy2){-->
<!--    //             //鼠标小于左上点横方向-->
<!--    //             //鼠标大于右下点横方向-->
<!--    //             //鼠标小于左上点竖方向-->
<!--    //             //鼠标大于右下点竖方向-->
<!--    //             //此时鼠标不在这个模块中-->
<!--    //             //那就可以删除了-->
<!--    //             document.body.removeChild(addEle)-->
<!--    //         }else{-->
<!--    //             //否则,鼠标在这个模块中-->
<!--    //             //那就不删除-->
<!--    //             addEle.onclick=function (event) {-->
<!--    //                 let newDiv=document.createElement("div")-->
<!--    //                 //获取当前对象的位置-->
<!--    //                 var addDivX = this.offsetLeft-->
<!--    //                 var addDivY = this.offsetTop-->
<!--    //                 newDiv.style.position="absolute"-->
<!--    //                 newDiv.style.left=this.offsetLeft+this.offsetWidth+"px"-->
<!--    //                 newDiv.style.top=this.offsetTop+this.offsetHeight+30+"px"-->
<!--    //                 newDiv.style.width=50+"px"-->
<!--    //                 newDiv.style.height=30+"px"-->
<!--    //                 newDiv.style.background="#00FF00"-->
<!--    //                 newDiv.id=this.id.replace("AddId", "")+"NewDiv"-->
<!--    //                 document.body.append(newDiv)-->
<!--    //             }-->
<!--    //             addEle.onmouseout=function (event) {-->
<!--    //                 this.id.replace("AddId", "")-->
<!--    //                 var divObj = document.getElementById(this.id.replace("AddId", ""));-->
<!--    //                 var x=event.clientX;-->
<!--    //                 var y=event.clientY;-->
<!--    //                 var divx1 = divObj.offsetLeft;  //距离边界的距离-->
<!--    //                 var divy1 = divObj.offsetTop; //距离边界的距离-->
<!--    //                 var divx2 = divObj.offsetLeft + divObj.offsetWidth; //右下点距离边界的距离-->
<!--    //                 var divy2 = divObj.offsetTop +  divObj.offsetHeight; //右下点距离边界的距离-->
<!--    //                 if( x < divx1 || x > divx2 || y < divy1 || y > divy2){-->
<!--    //                     //移出了divObj,删除add模块-->
<!--    //                     document.body.removeChild(this)-->
<!--    //                 }else{-->
<!--    //                     //没移出divObj,不删除-->
<!--    //                 }-->
<!--    //             }-->
<!--    //         }-->
<!--    //     }-->
<!--    // }-->
<!--</script>-->
<script type="text/javascript" src="../../static/script/anim-event.js"></script>
<script type="text/javascript" src="../../static/script/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="../../static/script/leader-line.min.js"></script>
<!--<script type="text/javascript" src="../../static/script/tools.js"></script>-->
<!--<script type="text/javascript" src="../../static/script/event.js"></script>-->
<link rel="stylesheet" href="../../static/css/default.css">
<script>
    let workObj = document.getElementById("work")
    workObj.style.width = (screen.width - 158) + "px"
</script>
</body>
</html>